<template>
  <div class="department-bar">
    <template v-if="departmentDataFormat.length > 0">
      <div
        v-for="(item, index) in departmentDataFormat"
        :key="index"
        class="department-bar__item"
      >
        <div class="key" :title="item.label">{{ item.label }}</div>
        <div class="value">
          <Bar
            :percent="item.percent"
            :bar-text="getBarText(item.value)"
          />
        </div>
      </div>
    </template>

    <template v-else>
      <div style="height: 200px;">
        <el-empty style="padding: 0" description="暂无用餐数据" />
      </div>
    </template>

  </div>
</template>
<script>
import Bar from './Bar.vue'
export default {
  name: '',
  components: {
    Bar
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    departmentData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  },
  computed: {
    departmentDataFormat() {
      // return this.calculateLengths(this.departmentData, this.data?.count)
      const min = 20
      return this.departmentData.map(item => {
        const percent = (item.value / this.data?.count) * 100
        return {
          ...item,
          percent: percent < min ? percent + min : percent
        }
      })
    }
  },
  methods: {
    getBarText(count) {
      return `${count}人`
    }
  }
}
</script>
<style lang="scss" scoped>
.department-bar {
  width: 100%;
  padding: 0 66px;
  min-height: 264px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &__item {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
    .key {
      //text-align: right;
      width: 20%;
      margin-right: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .value {
      width: 80%;
      //flex: 1;
    }
  }
}
</style>
